'use strict'

import React, { Component } from 'react';
import {
    View,
    Image,
    StyleSheet,
    TouchableOpacity,
    TouchableHighlight,
    Dimensions
} from 'react-native';

import Color from '../../config/theme/standard/color';
// import Constant from '../../config/theme/standard/constant';
import Label from "../label";
import FontSize from "../../config/theme/standard/fonts";

export default class Radio extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            prevPropsInitial: props.initial,
            is_active_index: props.initial,
        };

        this._renderButton = this._renderButton.bind(this);
    }

    // componentWillReceiveProps(nextProps){
    //     if('initial' in nextProps){
    //         this.setState({
    //             is_active_index: nextProps.initial
    //         });
    //     }
    // }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (('initial' in nextProps) && (nextProps.initial !== prevState.prevPropsInitial)) {
            return {
                prevPropsInitial: nextProps.initial,
                is_active_index: nextProps.initial,
            };
        }
        return null;
    }

    static defaultProps = {
        radio_props: [],
        initial: 0,
    };

    _renderButton(obj, i) {

        let marginLeft;
        let columnCount;

        switch (this.props.size) {
            case 'large':
                columnCount = 3;
                marginLeft = 19;
                break;
            case 'middle':
                columnCount = 4;
                marginLeft = 11;
                break;
            case 'small':
                columnCount = 5;
                marginLeft = 12;
                break;
            case 'self':
                marginLeft = 0;
                break;
        }

        return (
            <RadioButton
                isSelected={this.state.is_active_index === i}
                obj={obj}
                key={i}
                index={i}
                disabled={this.props.disabled}
                onPress={(index) => {
                    if(this.state.is_active_index === index){
                        this.props.onPress(-1);
                        this.setState({is_active_index: -1})
                    } else {
                        this.props.onPress(index);
                        this.setState({is_active_index: index})
                    }

                }}
                size={this.props.size}
                style={this.props.style}
                isRadius={this.props.isRadius}
                selectedColor={this.props.selectedColor}
                unSelectedColorText={this.props.unSelectedColorText}
                unSelectedColorBorder={this.props.unSelectedColorBorder}
                borderRadius={this.props.borderRadius}
                marginLeft={ i % columnCount == 0 ? 0 : marginLeft }
                marginRight={ this.props.size == 'self'? 12 : 0 }
            />
        )
    }

    render() {
        let render_content = false;
        if (this.props.radio_props.length == 0 ) {
            render_content = false
        } else {
            render_content = this.props.radio_props.map(this._renderButton)
        }
        return (
            <View style={[Style.radio, {marginLeft: this.props.marginLeft}]}>
                {render_content}
            </View>
        )
    }
}

export class RadioButton extends React.Component {
    constructor(props) {
        super(props);
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true
    }

    render () {

        return (
            <TouchableOpacity activeOpacity={0.7}
                              onPress={() => {this.props.onPress(this.props.index)}}
                              disabled={this.props.obj.disabled}
            >
                <View style={{marginLeft: this.props.marginLeft,marginRight:this.props.marginRight}}>
                    <RadioButtonLabel {...this.props}/>
                </View>
            </TouchableOpacity>
        )
    }
}

export class RadioButtonLabel extends React.Component {

    constructor (props) {
        super(props)
    }
    render () {

        let label;
        //let labelFontSize;
        let labelColor;
        let disabledLabelColor;
        let borderColor;
        let disabledBorderColor;
        let bgColor;
        let disabledBgColor;
        const sWidth = Dimensions.get('window').width;
        const containerStyle = [Style.container];

        if (!this.props.isRadius) {
            containerStyle.push({borderRadius: 0});
        }

        switch (this.props.size) {
            case 'large':
                containerStyle.push({width: (sWidth - 76)/3, height: 44});
                if(!this.props.obj.description) {
                    containerStyle.push({height: 26, marginVertical: 5});
                }
                label = this.props.obj.label;
                //labelFontSize = 'form';
                break;
            case 'middle':
                containerStyle.push({width: (sWidth - 75)/4, height: 25, marginVertical: 9});
                label = this.props.obj.label.length > 3 ? this.props.obj.label.slice(0, 3) + '...': this.props.obj.label;
                //labelFontSize = 'form';
                break;
            case 'small':
                containerStyle.push({width: (sWidth - 0.12 * 2 * sWidth-(4 * 12))/5, height: 22, marginVertical: 5});
                label = this.props.obj.label.length > 3 ? this.props.obj.label.slice(0, 3) : this.props.obj.label;
                //labelFontSize = 'percent';
                break;
            case 'self':
                containerStyle.push({ height: 25, marginVertical: 9,paddingHorizontal:12});
                label = this.props.obj.label;
                //labelFontSize = 'form';
                break;
        }

        const { selectedColor, unSelectedColorText, unSelectedColorBorder, borderRadius } = this.props;



        if(this.props.isSelected){
            labelColor = this.props.style == 'primary' ? Color.white : Color.blockSelect.select;
            //disabledLabelColor = this.props.style == 'primary' ? Color.white: Color.button.disable;
            disabledLabelColor = Color.blockSelect.disableText;
            borderColor = selectedColor;
            disabledBorderColor = Color.blockSelect.disableBorder;
            bgColor = this.props.style == 'primary' ? selectedColor : Color.white;
            disabledBgColor = this.props.style == 'primary' ? Color.blockSelect.disableBackground : Color.blockSelect.disableBackground;
        } else {
            //labelColor = this.props.size == 'large' ? Color.input.normal : Color.normal;
            //labelColor = unSelectedColorText == '' ? this.props.size == 'large' ? Color.input.normal : Color.normal : unSelectedColorText;
            labelColor = Color.blockSelect.normalText;
            //disabledLabelColor = this.props.style == 'primary' ? Color.white : Color.button.disable;
            disabledLabelColor = Color.blockSelect.disableText;
            borderColor = unSelectedColorBorder;
            disabledBorderColor = Color.blockSelect.disableBorder;
            bgColor = Color.white;
            disabledBgColor = this.props.style == 'primary' ? Color.blockSelect.disableBackground : Color.blockSelect.disableBackground;
        }

        return (
            <View onPress={() => { if (!this.props.disabled) {this.props.onPress( this.props.index)}}} disabled={this.props.disabled || this.props.obj.disabled}>
                <View style={[
                    {borderRadius: borderRadius},
                    containerStyle,
                    {borderColor: this.props.obj.disabled ? disabledBorderColor : borderColor,
                    backgroundColor: this.props.obj.disabled ? disabledBgColor : bgColor,
                }]}>
                    <Label text={label} labelStyle={{color: this.props.obj.disabled ? disabledLabelColor : labelColor,fontSize:this.props.size == 'small' ? FontSize.blockSelect.smallTitleFontSize:FontSize.blockSelect.titleFontSize}} />
                    {( this.props.obj.description && this.props.size == 'large' ? (
                        <Label text={this.props.obj.description}  numberOfLines={1} labelStyle={{color: this.props.obj.disabled ? disabledLabelColor : labelColor,fontSize:FontSize.blockSelect.descFontSize}}/>
                    ) : null )}
                </View>
            </View>
        )
    }
}

let Style = StyleSheet.create({
    radio: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    container: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        // width: (Constant.screenWidth - 76)/3,
        // height: 44,
        borderWidth: 1,
        borderColor: Color.border,
        //borderRadius: 3,
        marginVertical: 10,
    },
});

module.exports = Radio;
